<template>
  <div>
    <avue-crud
      ref="crud"
      style="width:100%"
      :data="loadData"
      :option="tableOption"
      :table-loading="loading"
    >
     <template slot-scope="scope" slot="indexLabel">
        <span>{{scope.row.$index+(page.current - 1) * page.size + 1}}</span>
      </template>
    <template slot='paySerials' slot-scope="scope">
        <div v-for="(item,index) in scope.row.paySerials" :key="index">
          <span>{{item.payChannelNo == '01'?'微信':(item.payChannelNo == '02'?'储值卡':'支付宝')}}</span>
        <!-- /
        <span>{{item.payAmt}}元</span> -->
        </div>
    </template>
      <template slot="menu"  slot-scope="scope">
       <el-button type="text" icon="el-icon-view" @click="details(scope.row)">详情</el-button>
        <!-- <el-button type="text" icon="el-icon-sold-out" @click="tuihuo(scope.row)">退货</el-button> -->
      </template>
    </avue-crud>
      <template>
      <div style="width:100%;position:relative;height:100px">
        <el-pagination
          :page-sizes="[10, 20,30,40, 50, 100]"
          :pager-count="7"
          :current-page="page.current"
          :page-size="page.size"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin:2% 0;position:absolute;right:1%"
          background
          @size-change="sizeChange"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </template>
     <el-dialog title="退货" destroy-on-close :visible.sync="dialogVisible" width="45%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <div style="margin:20px">
          注：1.已用优惠券不予退还
          2.退款后积分将按照退款金额进行扣减
          3.退款金额将在1-3个工作日内退还至支付账户
        </div>
        <el-form-item label="退款原因：" prop="refundReason">
          <el-checkbox-group v-model="ruleForm.refundReason">
            <el-checkbox label="00">下错单</el-checkbox>
            <el-checkbox label="01">客户不想要了</el-checkbox>
            <el-checkbox label="02">商品库存不足</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="退款说明：" prop="refundIntro">
          <el-input
            v-model="ruleForm.refundIntro"
            placeholder="请填写退款说明"
            maxlength="256"  show-word-limit  :autosize="{ minRows: 4, maxRows: 6}"
            type="textarea"
          ></el-input>
        </el-form-item>
        <div style="padding:20px 40px">
          退款信息
          <div>
            <p>
              退款金额:￥
              <span>{{ruleForm.refundAmt}}</span>
            </p>
            <p>
              退回账户:
              <span
                v-for="(item,index) in  this.ruleForm.paySerials"
                :key="index"
              >{{item.payChannelNo | status}}、</span>
            </p>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlSure" :loading="loadingSure">退 货</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script src='./closeTrade.js'></script>

<style lang="scss">
</style>